<template>
  <div class="user-center-view">
    <app-header></app-header>
    <div class="user-center-container">
      <!-- 侧边栏导航 -->
      <div class="sidebar">
        <div class="user-info-section">
          <div class="avatar-container">
            <img src="@/assets/images/page/zhu.png" alt="用户头像" class="user-avatar" />
          </div>
          <div class="user-basic-info">
            <div class="user-name">张三</div>
            <div class="user-title">副教授</div>
            <div class="user-institution">大学教授</div>
          </div>
        </div>
        
        <nav class="sidebar-nav">
          <ul class="nav-list">
            <li class="nav-item" :class="{active: activeTab === 'MyArticle'}" @click="switchTab('MyArticle')">
              <span class="nav-text">我提交的文章</span>
            </li>
            <li class="nav-item" :class="{active: activeTab === 'MyAchievements'}" @click="switchTab('MyAchievements')">
              <span class="nav-text">我的成果</span>
            </li>
            <li class="nav-item" :class="{active: activeTab === 'MyCollections'}" @click="switchTab('MyCollections')">
              <span class="nav-text">我的收藏</span>
            </li>
            <!-- <li class="nav-item" :class="{active: activeTab === 'MyLikes'}" @click="switchTab('MyLikes')">
              <span class="nav-text">我的点赞</span>
            </li> -->
            <li class="nav-item" :class="{active: activeTab === 'Setting'}" @click="switchTab('Setting')">
              <span class="nav-text">个人信息管理</span>
            </li>
            <li class="nav-item" :class="{active: activeTab === 'MyOrders'}" @click="switchTab('MyOrders')">
              <span class="nav-text">我的订单</span>
            </li>
            <li class="nav-item" :class="{active: activeTab === 'MyRecommendations'}" @click="switchTab('MyRecommendations')">
              <span class="nav-text">我的推荐</span>
            </li>
          </ul>
        </nav>
      </div>
      
      <!-- 主内容区域 -->
      <div class="main-content">
        <component :is="activeTab" />
      </div>
    </div>
    <app-footer></app-footer>
  </div>
</template>

<script>
// 导入所有子组件
import MyArticle from './MyArticle.vue'
import MyAchievements from './MyAchievements.vue'
import MyCollections from './MyCollections.vue'
import MyLikes from './MyLikes.vue'
import ProfileManagement from './ProfileManagement.vue'
import MyOrders from './MyOrders.vue'
import MyRecommendations from './MyRecommendations.vue'
import AppHeader from '../components/AppHeader.vue'
import AppFooter from '../components/AppFooter.vue'
import SettingView from '../SettingView.vue'
import Setting from './Setting.vue'

export default {
  name: 'UserCenter',
  components: {
    MyArticle,
    MyAchievements,
    MyCollections,
    MyLikes,
    ProfileManagement,
    MyOrders,
    MyRecommendations,
    AppHeader,
    AppFooter,
    SettingView,
    Setting
  },
  data() {
    return {
      activeTab: 'MyRecommendations' // 默认显示"我的推荐"
    }
  },
  methods: {
    switchTab(tabName) {
      this.activeTab = tabName;
    }
  }
}
</script>

<style scoped lang="scss">
@import '@zkwq/business/dist/var.scss';

.user-center-view {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.user-center-container {
  flex: 1;
  max-width: 1500px;
  margin: 20px auto;
  padding: 0 20px;
  display: flex;
  gap: 20px;
}

/* 侧边栏样式 */
.sidebar {
  width: 260px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.user-info-section {
  padding: 30px 20px;
  text-align: center;
  border-bottom: 1px solid #e8e8e8;
  
  .avatar-container {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    
    .user-avatar {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .user-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
  }
  
  .user-title,
  .user-institution {
    font-size: 14px;
    color: #666;
    margin-bottom: 3px;
  }
}

.sidebar-nav {
  padding: 10px 0;
  
  .nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .nav-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    color: #333;
    
    &:hover {
      background-color: #f5f5f5;
    }
    
    &.active {
      background-color: #4A90E2;
      color: white;
    }
    
    .nav-icon {
      margin-right: 10px;
      font-size: 18px;
    }
  }
}

/* 主内容区域样式 */
  .main-content {
    flex: 1;
    min-width: 900px;
    max-width: 900px; /* 固定最大宽度，确保所有菜单切换时宽度一致 */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow-x: auto; /* 内容超出时横向滚动，不扩展容器 */
    
    /* 确保所有子组件内容宽度一致 */
    > * {
      width: 100%;
      min-width: 100%;
      box-sizing: border-box;
    }
  }

@media (max-width: 768px) {
  .user-center-container {
    flex-direction: column;
    padding: 0 10px;
  }
  
  .sidebar {
    width: 100%;
  }
  
  .main-content {
    min-width: unset;
    width: 100%;
  }
}
</style>